<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件上传</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#10B981',
                        accent: '#6366F1',
                        neutral: '#F3F4F6',
                        danger: '#EF4444',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .file-drop-active {
                @apply border-primary bg-primary/5;
            }
            .upload-progress {
                @apply h-2 bg-gray-200 rounded-full overflow-hidden;
            }
            .upload-progress-bar {
                @apply h-full bg-secondary transition-all duration-300 ease-out;
            }
        }
    </style>
</head>
<body class="font-inter bg-gray-50 min-h-screen flex flex-col">
    <!-- 导航栏 -->
    <header class="bg-white shadow-sm sticky top-0 z-50">
        <div class="container mx-auto px-4 py-4 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <i class="fa fa-cloud-upload text-primary text-2xl"></i>
                <h1 class="text-xl font-semibold text-gray-800">文件上传服务</h1>
            </div>
            <nav>
                <ul class="flex space-x-6">
                    <li><a href="#" class="text-gray-600 hover:text-primary transition-colors">首页</a></li>
                    <li><a href="#" class="text-gray-600 hover:text-primary transition-colors">文档</a></li>
                    <li><a href="#" class="text-gray-600 hover:text-primary transition-colors">联系我们</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <!-- 主内容区 -->
    <main class="flex-grow container mx-auto px-4 py-8">
        <section class="max-w-3xl mx-auto">
            <div class="text-center mb-8">
                <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-gray-800 mb-3">上传文件到服务器</h2>
                <p class="text-gray-600 max-w-2xl mx-auto">选择或拖放文件到下方区域，然后点击上传按钮将文件发送到服务器。支持多种文件格式，最大文件大小为50MB。</p>
            </div>

            <!-- 文件上传区域 -->
            <div id="fileDropArea" class="border-2 border-dashed border-gray-300 rounded-xl p-8 text-center transition-all duration-300 hover:border-primary bg-white shadow-sm">
                <div class="file-drop-icon mb-4">
                    <i class="fa fa-cloud-upload text-5xl text-gray-400 transition-transform duration-300 hover:scale-110"></i>
                </div>
                <h3 class="text-lg font-medium text-gray-700 mb-2">拖放文件到此处</h3>
                <p class="text-gray-500 mb-6">或者</p>
                <label for="fileInput" class="inline-block bg-primary hover:bg-primary/90 text-white font-medium py-3 px-6 rounded-lg transition-all duration-300 shadow-md hover:shadow-lg cursor-pointer">
                    <i class="fa fa-file-o mr-2"></i>选择文件
                    <input id="fileInput" type="file" class="hidden" />
                </label>
                <p class="text-sm text-gray-500 mt-4">支持的格式: PDF, DOCX, JPG, PNG, MP4, ZIP 等 (最大 50MB)</p>
            </div>

            <!-- 已选择文件信息 -->
            <div id="selectedFile" class="mt-8 bg-white rounded-xl p-6 shadow-sm hidden">
                <div class="flex items-start">
                    <div id="fileIcon" class="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center mr-4">
                        <i class="fa fa-file-o text-primary text-xl"></i>
                    </div>
                    <div class="flex-grow">
                        <h4 id="fileName" class="font-medium text-gray-800 truncate"></h4>
                        <p id="fileSize" class="text-sm text-gray-500 mt-1"></p>
                        <div id="fileProgress" class="upload-progress mt-3 hidden">
                            <div id="progressBar" class="upload-progress-bar" style="width: 0%"></div>
                        </div>
                    </div>
                    <button id="removeFile" class="text-gray-400 hover:text-danger transition-colors">
                        <i class="fa fa-times"></i>
                    </button>
                </div>
            </div>

            <!-- 上传按钮 -->
            <div id="uploadButtonContainer" class="mt-8 text-center hidden">
                <button id="uploadButton" class="bg-secondary hover:bg-secondary/90 text-white font-medium py-3 px-8 rounded-lg transition-all duration-300 shadow-md hover:shadow-lg disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center mx-auto">
                    <i class="fa fa-upload mr-2"></i>上传文件
                </button>
            </div>

            <!-- 上传结果 -->
            <div id="uploadResult" class="mt-8 rounded-xl p-6 shadow-sm hidden">
                <div id="successMessage" class="bg-green-50 border border-green-200 text-green-700 hidden">
                    <div class="flex items-start">
                        <div class="flex-shrink-0 pt-0.5">
                            <i class="fa fa-check-circle text-green-500 text-xl"></i>
                        </div>
                        <div class="ml-3">
                            <h3 class="text-sm font-medium">上传成功</h3>
                            <div class="mt-2 text-sm">
                                <p>文件已成功上传到服务器。</p>
                                <div class="mt-3">
                                    <a id="downloadLink" href="#" target="_blank" class="text-green-600 hover:text-green-700 font-medium flex items-center">
                                        <i class="fa fa-download mr-1.5"></i> 下载文件
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="errorMessage" class="bg-red-50 border border-red-200 text-red-700 hidden">
                    <div class="flex items-start">
                        <div class="flex-shrink-0 pt-0.5">
                            <i class="fa fa-exclamation-circle text-red-500 text-xl"></i>
                        </div>
                        <div class="ml-3">
                            <h3 class="text-sm font-medium">上传失败</h3>
                            <div class="mt-2 text-sm">
                                <p id="errorDetails">上传过程中发生错误，请重试。</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="bg-gray-800 text-white py-8">
        <div class="container mx-auto px-4">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-6 md:mb-0">
                    <div class="flex items-center space-x-2">
                        <i class="fa fa-cloud-upload text-primary text-xl"></i>
                        <span class="font-semibold text-lg">文件上传服务</span>
                    </div>
                    <p class="text-gray-400 mt-2 text-sm">安全、快速地上传和管理文件</p>
                </div>
                <div class="flex space-x-6">
                    <a href="#" class="text-gray-400 hover:text-white transition-colors">
                        <i class="fa fa-github text-xl"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-white transition-colors">
                        <i class="fa fa-twitter text-xl"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-white transition-colors">
                        <i class="fa fa-linkedin text-xl"></i>
                    </a>
                </div>
            </div>
            <div class="border-t border-gray-700 mt-6 pt-6 text-center text-gray-400 text-sm">
                &copy; 2025 文件上传服务. 保留所有权利.
            </div>
        </div>
    </footer>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 获取DOM元素
            const fileDropArea = document.getElementById('fileDropArea');
            const fileInput = document.getElementById('fileInput');
            const selectedFile = document.getElementById('selectedFile');
            const fileName = document.getElementById('fileName');
            const fileSize = document.getElementById('fileSize');
            const fileIcon = document.getElementById('fileIcon');
            const fileProgress = document.getElementById('fileProgress');
            const progressBar = document.getElementById('progressBar');
            const removeFile = document.getElementById('removeFile');
            const uploadButtonContainer = document.getElementById('uploadButtonContainer');
            const uploadButton = document.getElementById('uploadButton');
            const uploadResult = document.getElementById('uploadResult');
            const successMessage = document.getElementById('successMessage');
            const errorMessage = document.getElementById('errorMessage');
            const errorDetails = document.getElementById('errorDetails');
            const downloadLink = document.getElementById('downloadLink');

            let selectedFileData = null;

            // 文件拖放相关事件
            ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
                fileDropArea.addEventListener(eventName, preventDefaults, false);
            });

            function preventDefaults(e) {
                e.preventDefault();
                e.stopPropagation();
            }

            ['dragenter', 'dragover'].forEach(eventName => {
                fileDropArea.addEventListener(eventName, highlight, false);
            });

            ['dragleave', 'drop'].forEach(eventName => {
                fileDropArea.addEventListener(eventName, unhighlight, false);
            });

            function highlight() {
                fileDropArea.classList.add('file-drop-active');
            }

            function unhighlight() {
                fileDropArea.classList.remove('file-drop-active');
            }

            // 处理拖放文件
            fileDropArea.addEventListener('drop', handleDrop, false);

            function handleDrop(e) {
                const dt = e.dataTransfer;
                const files = dt.files;

                if (files.length) {
                    handleFiles(files[0]);
                }
            }

            // 处理文件选择
            fileInput.addEventListener('change', function() {
                if (this.files.length) {
                    handleFiles(this.files[0]);
                }
            });

            // 处理选择的文件
            function handleFiles(file) {
                selectedFileData = file;
                displaySelectedFile(file);
            }

            // 显示已选择的文件信息
            function displaySelectedFile(file) {
                fileName.textContent = file.name;
                fileSize.textContent = formatFileSize(file.size);
                updateFileIcon(file.name);
                
                selectedFile.classList.remove('hidden');
                selectedFile.classList.add('animate-fadeIn');
                uploadButtonContainer.classList.remove('hidden');
                uploadButtonContainer.classList.add('animate-fadeIn');
                uploadResult.classList.add('hidden');
            }

            // 更新文件图标
            function updateFileIcon(fileName) {
                const fileExtension = fileName.split('.').pop().toLowerCase();
                const iconClass = getFileIconClass(fileExtension);
                fileIcon.innerHTML = `<i class="fa ${iconClass} text-primary text-xl"></i>`;
            }

            // 根据文件扩展名获取图标类
            function getFileIconClass(extension) {
                const fileTypes = {
                    'pdf': 'fa-file-pdf-o',
                    'doc': 'fa-file-word-o',
                    'docx': 'fa-file-word-o',
                    'xls': 'fa-file-excel-o',
                    'xlsx': 'fa-file-excel-o',
                    'ppt': 'fa-file-powerpoint-o',
                    'pptx': 'fa-file-powerpoint-o',
                    'jpg': 'fa-file-image-o',
                    'jpeg': 'fa-file-image-o',
                    'png': 'fa-file-image-o',
                    'gif': 'fa-file-image-o',
                    'mp3': 'fa-file-audio-o',
                    'wav': 'fa-file-audio-o',
                    'mp4': 'fa-file-video-o',
                    'mov': 'fa-file-video-o',
                    'zip': 'fa-file-archive-o',
                    'rar': 'fa-file-archive-o',
                    'txt': 'fa-file-text-o'
                };

                return fileTypes[extension] || 'fa-file-o';
            }

            // 格式化文件大小
            function formatFileSize(bytes) {
                if (bytes === 0) return '0 Bytes';
                
                const k = 1024;
                const sizes = ['Bytes', 'KB', 'MB', 'GB'];
                const i = Math.floor(Math.log(bytes) / Math.log(k));
                
                return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
            }

            // 移除已选择的文件
            removeFile.addEventListener('click', function() {
                selectedFileData = null;
                selectedFile.classList.add('hidden');
                uploadButtonContainer.classList.add('hidden');
                uploadResult.classList.add('hidden');
                fileInput.value = '';
            });

            // 上传文件
            uploadButton.addEventListener('click', function() {
                if (!selectedFileData) return;

                // 显示进度条
                fileProgress.classList.remove('hidden');
                uploadButton.disabled = true;
                uploadButton.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i>上传中...';
                uploadResult.classList.add('hidden');

                // 模拟文件上传进度
                let progress = 0;
                const progressInterval = setInterval(() => {
                    progress += Math.random() * 15;
                    if (progress > 95) {
                        progress = 95;
                        clearInterval(progressInterval);
                    }
                    progressBar.style.width = `${progress}%`;
                }, 300);

                // 模拟上传完成
                setTimeout(() => {
                    clearInterval(progressInterval);
                    progressBar.style.width = '100%';
                    
                    // 模拟随机成功/失败
                    const isSuccess = Math.random() > 0.3;
                    
                    if (isSuccess) {
                        // 成功处理
                        successMessage.classList.remove('hidden');
                        errorMessage.classList.add('hidden');
                        
                        // 生成随机文件名作为示例
                        const randomFileName = selectedFileData.name.replace(/\.[^/.]+$/, '') + '_' + Date.now() + selectedFileData.name.substring(selectedFileData.name.lastIndexOf('.'));
                        downloadLink.href = `#${randomFileName}`;
                        downloadLink.textContent = `下载 ${selectedFileData.name}`;
                    } else {
                        // 失败处理
                        successMessage.classList.add('hidden');
                        errorMessage.classList.remove('hidden');
                        
                        // 随机错误信息
                        const errorMessages = [
                            '上传过程中发生网络错误',
                            '服务器暂时无法处理请求',
                            '文件大小超过限制',
                            '文件格式不支持'
                        ];
                        errorDetails.textContent = errorMessages[Math.floor(Math.random() * errorMessages.length)];
                    }
                    
                    uploadResult.classList.remove('hidden');
                    uploadButton.innerHTML = '<i class="fa fa-upload mr-2"></i>上传文件';
                    uploadButton.disabled = false;
                }, 3000);
            });
        });
    </script>
</body>
</html>
    